<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建</title>
    <link type="text/css" href="创建.css" rel="stylesheet">   <!-- 引入外部样式表, 当样式需要用于很多页面时。外部样式表是理想的选择 -->

    <!-- 当单个文档需要特殊的样式时,就应该使用内部样式表。 -->
    <style type="text/css">
        hr{color: #cc2200}
        p{margin-left: 30px}
        /*body{background-image: url("../images/cute_Panda.JPG")}  !*  测试的背景图  和外部样式中有所不同*!*/
        h3{
            text-align: right;
            font-size: 20pt;
        }

    </style>
</head>
<body>
    <!-- 主要测试在不同的 外部样式表 内部样式表 内联样式 三种的不同类型的样式表的互相作用 -->
    <hr/>

    <!-- 内联 样式 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。
要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距： -->
    <p style="color:hotpink;margin-left: 20px">
        This is a paragraph
    </p>
    <!--  从优先级别来说内部 内联样式 大于 内部样式 大于 外部样式 -->
    <!-- 多重样式  果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 -->
    <h3>多重样式</h3>
</body>
</html>